<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Stopwatch</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
            box-sizing: border-box;
        }
        body {
            height: 100vh;
            display: flex;
            /* 保持在画布中心 */
            justify-content: center;
            align-items: center;
            background: #333;
        }
        .clock {
            width: 400px;
            height: 400px;
            background-color: rgb(15,15,15);
            /* 圆角 */
            border-radius: 50px;
        }
        .second,
        .second-box {
            height: 20px;
            font-size: 24px;
            color: white;
        }
        .second-box {
            padding-left: 70px;
        }
    </style>
</head>
<body>
    <div class="clock">
        <canvas width="400px" height="400px" id="canvas"></canvas>
        <div class="second-box">
            距离设置的时间(5-7 18:00)
            <span class="second"></span>
            秒
        </div>
    </div>
    <script>
        var canvas = document.getElementById("canvas");     // 获取元素，建立联系
        var ctx = canvas.getContext("2d");  // 联系上下文
        // 函数定义
        function drawPanel()                // 绘制底盘
        {
            ctx.translate(200, 200); // 中心点
            // 开始绘制
            ctx.beginPath();
            ctx.arc(0, 0, 170, 0, 2 * Math.PI);
            ctx.fillStyle = "white";
            ctx.fill();
        }
        function secondsScale()
        { 
            for (var i = 0; i < 60; i++)
            {
                // 循环绘制刻度
                ctx.save();
                ctx.lineWidth = 3;
                ctx.strokeStyle = "black";
                ctx.translate(0, 0);
                ctx.rotate(i * 6 * Math.PI / 180); // 旋转角度
                ctx.beginPath();
                ctx.moveTo(0, -150);
                ctx.lineTo(0, -160);
                ctx.stroke();
                ctx.closePath();
                ctx.restore();
            }
        }
        function centerDot()
        {
            ctx.beginPath();
            ctx.arc(0, 0, 8, 0, 2 * Math.PI);
            ctx.fill();
            ctx.beginPath();
            ctx.fillStyle = "gray";
            ctx.arc(0, 0, 5, 0, 2 * Math.PI);
            ctx.fill();
        }
        
        function secondHand(seconds)       // 绘制秒针
        {
            // 应该旋转的角度，默认时钟为指向12点
            var radius = ((2 * Math.PI) / 60) * seconds;
            // 保存当前状态，使旋转后能回到当初状态
            ctx.save();
            ctx.beginPath();
            // 针的宽度
            ctx.lineWidth = 1;
            // 针头
            ctx.lineCap = "round";
            ctx.strokeStyle = "red";
            // 旋转
            ctx.rotate(radius);
            // 画线
            ctx.moveTo(0, 0);
            ctx.lineTo(0, -130);
            ctx.stroke();
            // 返回初始状态
            ctx.restore();
        }
        // 获取当前时间
        function update()
        {
            var time = new Date();
            var seconds = time.getSeconds();
            // 保存canvas状态
            ctx.save();
            drawPanel();
            secondsScale();
            secondHand(seconds);
            centerDot();
            // 恢复canvas状态
            ctx.restore();
        }
        update();
        // 开启定时器，时钟运转
        setInterval(() =>
        {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            update();
        }, 1000);
        // 数字计时
        var second = document.querySelector('.second');
        var inputTime = +new Date('2022-5-7 18:00:00'); // 显示距离设置时间的秒数
        countDown();
        setInterval(countDown, 1000);
        function countDown()
        {
            var nowTime = +new Date();  // 当前时间
            var times = (inputTime - nowTime) / 1000; // 剩余秒数
            var s = parseInt(times);
            second.innerHTML = s + 1;
        }
    </script>
</body>
</html>